<template>
   <page-header 
    @handleAddClickEmit="handleAddClick"
    ></page-header>
    <page-table :tableData="data" :tableList="list" :isselection="true" :isSite="true"
        @handleEditClickEmit="handleEditClick"
        @handleDleClickEmit="handleDleClickEmit"
        @handleSelectionChangeEmit="handleSelectionChange"

        >
    </page-table>
   <div class="page-pagination">
    <page-pagination :total="tableSize" @handleCurrentChangeEmit="handleCurrentChange"></page-pagination>
   </div>
   <!-- 抽屉 -->
   <page-drawer 
   :value="drawerVisible"
   :formData="formData"
   @handleCloseEdit="handleClose"
   @handleSubmitEdit="handleSubmit"
   ></page-drawer>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-facing-decorator';
import PageTable from '@/components/page-table/index.vue';
import PagePagination from '@/components/page-pagination/index.vue';
import PageHeader from './cpns/page-header.vue';
import PageDrawer from './cpns/page-drawer.vue';

import { tableData, tableList } from './config';

@Component({
    components:{ PageTable,PagePagination,PageHeader,PageDrawer}
})
export default class CategoryAddress extends Vue {
    public data = tableData;
    public list = tableList;
    public drawerVisible:boolean=false
    public formData:any={}
    public tableSize=tableData.length

    public handleClose(){
        this.drawerVisible=false
    }

    public handleEditClick(info: any) {
        this.drawerVisible=true  
        console.log(info);
        
        this.formData=info
    }

    public handleDleClickEmit(info:any){
        console.log(info);
    }

    public handleSelectionChange(list:[]){
        console.log(list);
        
    }

    // 分页切换
    public handleCurrentChange(current:number){
        console.log(current);
    }

    // 新增打开抽屉
    public handleAddClick(){
        this.formData = {}; // 先将 formData 置为空对象
        setTimeout(()=>{
            this.drawerVisible=true
        },250)
    }

    // 新增和编辑的提交
    public handleSubmit(data:any){
        tableData.push(data)
    }
}
</script>

<style scoped lang="less">
.page-pagination {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 2vh;
    // transform: translate(-50%,0);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 10vh;
    background-color: #fff;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    margin: 20px auto;
    border-radius: 3vh;
}
</style>